<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>

    <script src="js/vue-2.7.14.js"></script>
</head>
<body>
    <div id="app">
        <!--插值表达式-->
        {{message}}<br>
        <!--引用对象中的数据-->
        {{user}}<br>
        {{user.username}}<br>
        <!--引用数组中的数据-->
        {{arr}}<br>
        {{arr[0]}}<br>
        <!--引用集合中的数据-->
        {{userList}}<br>
        {{userList[1].username}}<br>
        <!--可以实现运算-->
        {{count + 1}}<br>
        <!--调用方法-->
        {{sayHello()}}
    </div>

</body>

<script>
    new Vue({
        el:"#app",//指定Vue管理的区域
        data:{//模型数据
            message:"Vue入门",
            age:18,
            flag:true,
            count:0,
            user:{
                id:1,
                username:"一二",
                password:"123"
            },
            arr:["mybatis","spring","springMVC"],
            userList:[
                {id:1,username:"一二",password:"123"},
                {id:2,username:"布布",password:"123"}
                ]
        },
        methods:{//方法列表
            //推荐简单的写法 ECMAScript6新定义的
            sayHello(){
                return "Hello Vue";
            },
            //另一种写法
            sayHello:function () {
                return "Hello Vue!!!";
            }
        }
    });
</script>
</html>